@import "../common/rem";
@import "../common/variables";
@import "../less/style";
@import "../common/mixins";
#h5logDetail {
	.image{
		.px2rem(padding-left,32);
		.px2rem(padding-right,32);
		.px2rem(margin-bottom,14);
		.px2rem(max-width,695);

		div{
			position: relative;
			display: inline-block;
			.px2rem(width,200);
			.px2rem(height,200);
			@media (min-device-width: 320px) and (max-device-width: 359px) {
				.px2rem(width, 180);
				.px2rem(height, 180);
			}
			overflow: hidden;
			.px2rem(margin-right,10);
			.px2rem(margin-bottom,10);

			img {
				.px2rem(min-height, 200);
				.px2rem(min-width, 200);
				position: absolute;
				top: 0;
				left: 0;
			}
			//width: 30%;
			//margin-right: 0.13333333rem;
			//height: auto;
		}
		img {
			.px2rem(padding-top,10);

			//.px2rem(width, 152);
			//.px2rem(margin-right, 10);
		}
	}
	.liked {
		color: red;
	}
	.like-and-comment {
		background: #fff;
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 100;
		.px2rem(height, 90);
		.px2rem(font-size, 26);
		.px2rem(line-height, 50);
		color: #969696;
		border-top: 1px solid #DEE3EE;
		.log-detail-bottom {
			width: 50%;
			position: relative;
			.px2rem(top, 20);
			display: inline-block;
			text-align: center;
			.icon--15 {
				.px2rem(padding-right,10);
				position: relative;
				.px2rem(top, 2);
				.px2rem(font-size, 34);
			}
			.icon--19 {
				.px2rem(padding-right,10);
				position: relative;
				.px2rem(top, 6);
				.px2rem(font-size, 34);
			}
		}
		.detail-bottom-left {
			border-right: 1px solid #DEE3EE;
		}
	}
	.video-mask{
		video{
			margin: auto;
			position: absolute;
			top: 0; left: 0; bottom: 0; right: 0;
		}
		span{
			.px2rem(width,100);
			.px2rem(height,100);
			position: absolute;
			z-index: 100;
			.px2rem(top,32);
			color: #fff;
			font-size: 32px;
			text-align: center;
			background: #e66666;
			.px2rem(border-radius,100);
			.px2rem(line-height,100);
			.px2rem(right,32);
		}
		position: absolute;
		background: rgba(0, 0, 0, 0.6);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}
	.attachs{
		.file{
			.px2rem(margin-top,20);
			.name{
				.px2rem(margin-left,16);
			}
			.size{
				color: #AAAAAA;
				float: right;
			}
			div{
				position: relative;
				//border-top: 1px solid #DDD;
				.hairline(top,#DDD);
				.px2rem(height,88);
				.px2rem(line-height,88);
				span{
					vertical-align: middle;
				}
				img{
					vertical-align: middle;

				}
			}
		}

		.audio{
			.px2rem(padding-left,13);
			.px2rem(margin-top,20);

			div{
				.px2rem(margin-top,10);
				span{
					position: relative;
					.px2rem(left,200);
					.px2rem(line-height,80);
				}
				img{
					.px2rem(margin-left,20);
					vertical-align: middle;
					.px2rem(margin-top, -6);
				}
				position: relative;
				&:before{
					content: " ";
					width: 0;
					position: absolute;
					height: 0;
					top: 30%;
					left: -14px;
					border-top: 15px solid transparent;
					border-right: 15px solid #f6f9fa;
					border-bottom: 15px solid transparent;

				}
				.px2rem(width,320);
				background: #f6f9fa;
				.px2rem(height,80);
				border-radius: 10px;
			}

		}
		.image{
				img {
					.px2rem(width, 152);
					.px2rem(margin-right, 10);
				}
		}
		.video{
			.px2rem(margin-top,20);
			display: table;
			div{
				background: #000000;
				.px2rem(width,300);
				.px2rem(height,200);
				.px2rem(border-radius,10);
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				img{
					vertical-align: middle;
				}
			}
		}
	}
	.main{
		.px2rem(padding-bottom,90);
	}
	.top{
		display: table;
		width: 100%;
		.px2rem(padding-bottom,22);
		.px2rem(padding-top,22);
		.px2rem(padding-left,32);
		.px2rem(padding-right,32);
	}
	.log-detail-page {

		.line-limit {
			.px2rem(padding-bottom, 20);
		}
		background-color: #fff;
		.triangle-up {
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid @color-log;
		}
		.log-head {
			.px2rem(height, 90);
			.px2rem(line-height, 90);
			border-bottom: 1px solid #DEE3EE;
		}
		.log-head-left {
			position: relative;
			.px2rem(height, 90);
			.px2rem(width, 150);
			.px2rem(top, -90);
			.px2rem(font-size, 32);
			z-index: 10;
			.icon-back {
				.px2rem(line-height, 90);
				.px2rem(margin-left, 30);
				color: @color-log;
			}
			.back-btn {
				.px2rem(line-height, 90);
				.px2rem(font-size, 30);
				.px2rem(top, -6);
				.px2rem(left, -8);
				position: relative;
				color: @color-log;
			}
		}
		.revoke-btn {
			position: relative;
			.px2rem(width, 100);
			.px2rem(font-size, 30);
			.px2rem(top, -180);
			float: right;
			color: @color-log;
		}
		.page-title {
			color: #2d2d2d;
			text-align: center;
			width: 100%;
			.px2rem(font-size, 34);
		}
		.color-line {
			background-color: #F6F9FA;
			.px2rem(height, 16);
		}
		.log-content {
			.writer-photo {
				img{
					vertical-align: middle;
				}
				display: table-cell;
				.px2rem(margin-left, 30);
				.px2rem(margin-top, 22);
				.px2rem(width, 80);
				.px2rem(height, 80);
				.head-photo {
					.px2rem(width, 80);
					.px2rem(height, 80);
					.px2rem(border-radius, 100);
				}
			}
			.writer-info {
				.px2rem(padding-left,22);
				display: table-cell;
				.writer-name {
					color: #2d2d2d;
					.px2rem(font-size, 32);
				}
				.date-and-phone {
					color: #aaaaaa;
					.px2rem(font-size, 22);
					span {
						.px2rem(margin-right, 12);
					}
				}
			}
			.log-main-context {
				color: #3d4145;
				.px2rem(font-size, 28);
				.px2rem(line-height, 40);
				.px2rem(padding-left, 32);
				.px2rem(padding-right, 32);
				.log-type {
					.px2rem(margin-right, 10);
					span {
						.px2rem(padding-left, 10);
						.px2rem(padding-right, 10);

					}
					display: inline-block;
					background-color: @color-log;
					color: #fff;
					.px2rem(font-size, 24);
					.px2rem(border-radius, 8);
					.px2rem(margin-bottom, 24);
					&:first-child{
						margin-left:0;
					}
				}
				.context-head {
					color: #aaaaaa;
				}
				.multi-select {
					background: #fff;
					.px2rem(margin-top, 20);
					.px2rem(margin-bottom, 20);
					.multi-select-type {
						display: inline-block;
						padding: 0;
						.px2rem(font-size, 24);
						span {
							.px2rem(padding-top, 10);
							.px2rem(padding-bottom, 10);
							.px2rem(padding-left, 12);
							.px2rem(padding-right, 12);
							.px2rem(margin-right, 14);
							background-color: #F4F6F7;
							color: #969696;
							border-radius: 8px;
							white-space: nowrap;
							line-height: 3;
						}
						span.kw-selected {
							background-color: #F76A75;
							color: #ffffff;
						}
					}
				}
			}
			.log-bottom-box {
				.px2rem(line-height, 80);
				background-color: #F6F9FA;
				color: #969696;
				.px2rem(font-size, 28);
				.log-bottom-select {
					color: @color-log;
					border-bottom: 4px solid @color-log;
				}
				.log-bottom {
					display: inline-block;
					width: 30%;
					text-align: center;
					margin-left: 10%;
					margin-right: 10%;
					.px2rem(line-height, 80);

				}
			}
		}
		.log-item {
			.like-item {
				position: relative;
				.hairline(bottom, #DDD);
				.px2rem(line-height, 100);
				.px2rem(height, 100);
				.px2rem(font-size, 30);
				color: #2d2d2d;
				.list-name {
					vertical-align: middle;
					display: inline;
					width: 85%;
				}
			}
			.comment-item {
				width: 100%;
				display: table;
				.px2rem(height, 120);
				.px2rem(font-size, 30);
				color: #2d2d2d;
				.item-left {
					img {
						position: absolute;
						.px2rem(top, 30);
					}
					.px2rem(width, 100);
					display: table-cell;
					position: relative;
					vertical-align: middle;
					.px2rem(height, 120);
					.px2rem(line-height, 120);
				}
				.item-right {
					position: relative;
					.hairline(bottom, #DDD);
					.px2rem(padding-left, 22);
					.px2rem(padding-right, 32);
					display: table-cell;
					vertical-align: middle;
					.px2rem(margin-right, 36);
					.px2rem(margin-left, 102);
					.px2rem(padding-top, 20);
					.commenter-time {
                        position: absolute;
                        .px2rem(right, 40);
                        color: #969696;
                        .px2rem(font-size, 26);
                    }

				}
				.comment-content {
					color: #969696;
					.px2rem(font-size, 26);
					.reply-name {
						color: #2d2d2d;
					}
					.reply-context {
						display: inline-block;
					}
				}
			}
			.list-photo {
				display: inline;
				vertical-align: middle;
				.px2rem(top, 18);
				.px2rem(margin-left, 32);
				.px2rem(margin-right, 15);
				.px2rem(width, 64);
				.px2rem(height, 64);
				.px2rem(border-radius, 100);
			}
			//.comment-photo{
			//	position: relative;
			//	.px2rem(top,30);
			//}
		}


	}
	.alert-show {
		position: absolute;
		display: -webkit-box;
		background-color: rgba(0, 0, 0, .3);
		height: 100%;
		width: 100%;
		top: 0;
		z-index: 10;
	}

	.alert-box {
		position: fixed;
		left: 0;
		right: 0;
		.px2rem(top, 516);
		.px2rem(height, 302);
		.px2rem(width, 562);
		.px2rem(font-size, 32);
		.px2rem(border-radius, 10);
		background-color: #fff;
		margin: 0 auto;
		.alert-info {
			.px2rem(height, 212);
			.px2rem(line-height, 44);
			.px2rem(padding-top, 73);
			color: #2d2d2d;
			text-align: center;
		}
		.alert-bottom {
			.px2rem(height, 90);
			.px2rem(line-height, 90);
			border-top: 1px solid #EBEFF4;
			.alert-btn-cancel {
				width: 50%;
				color: #2d2d2d;
				text-align: center;
				border-right: 1px solid #EBEFF4;
				display: inline-block;

			}
			.alert-btn-sure {
				width: 50%;
				color: @color-log;
				text-align: center;
				display: inline-block;
			}

		}

	}
}
